<template>
	<view class="bindPhone">
		<view class="weChatLogin">
			<view class="avatar">
				<view class="imgbox">
					<image class="img" src="@/static/LOGO.png">
					</image>
				</view>
			</view>
			<!-- <text style="font-weight: 700; margin-top: 40rpx; font-size: 30rpx">软件名称</text> -->
		</view>
		<!-- input -->
		<view class="input">
			<view class="left">
				账号 :
			</view>
			<view class="right">
				<input type="text" v-model="accountnumber" />
			</view>
		</view>
		<view class="btn" @click="login">
			立即登录
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		lkLoginApi
	} from '@/api/login.js'
	import {
		onShow
	} from '@dcloudio/uni-app'
	onShow(() => {
		if (localStorage.getItem('token')) {
			uni.navigateTo({
				url: '../select/index'
			})
		}
	})
	//input
	const accountnumber = ref('') // input
	// 登录
	const login = () => {
		if (accountnumber.value == '') {
			uni.showToast({
				title: "账号不能为空",
				icon: "none"
			})
			return
		}
		lkLoginApi({
			account: accountnumber.value
		}).then(res => {
			console.log('result', res)
			if (res.code == 200) {
				localStorage.setItem('token', res.token)
				// let nikeName = res.data.nikeName
				// console.log('nikeName', nikeName)
				uni.showToast({
					title: '登陆成功',
					icon: 'success',
				})
				uni.navigateTo({
					url: '../select/index'
				})
			}
		}).catch(err => {
			console.log('err',err);
			uni.showToast({
				title: '账号不存在',
				icon: 'none',
			})
		})
	}
</script>

<style lang="scss" scoped>
	.bindPhone {
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		padding: 40rpx;
		background-image: url('../../static/bgimg.png');
		background-size: cover;
		background-position: center center;

		.weChatLogin {
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-top: 160rpx;
			align-items: center;

			.avatar {
				width: 220rpx;
				height: 220rpx;
				border: 1rpx solid #fff;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;

				.imgbox {
					width: 160rpx;
					height: 160rpx;

					.img {
						// border-radius: 50%;
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.input {
			width: 400rpx;
			height: 70rpx;
			background-color: #F4F8FF;
			margin: 0 auto;
			margin-top: 120rpx;
			border-radius: 60rpx;
			display: flex;
			align-items: center;
			padding-left: 20rpx;

			.left {
				font-size: 23rpx;
				width: 80rpx;
			}
		}

		.btn {
			width: 400rpx;
			height: 70rpx;
			background-color: #B9ADFF;
			margin: 0 auto;
			margin-top: 30rpx;
			border-radius: 60rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>